<template>
  <div class="dog">
    <img :src="dog.dogImgUrl" alt="dog">
    <p @click="chColor(dog.dogName)" :style="{color, background}">{{dog.dogName}}</p>
  </div>
</template>

<script>
export default {
  name: 'DogCom',
  props: ['dog'],
  data () {
    return {
      color: '#000',
      background: '#fff',
      dogs: []
    }
  },
  methods: {
    chColor (dogName) {
      this.color = 'rgb(' + parseInt(Math.random() * 256) + ', ' + parseInt(Math.random() * 256) + ', ' + parseInt(Math.random() * 256) + ')'
      this.background = 'rgb(' + parseInt(Math.random() * 256) + ', ' + parseInt(Math.random() * 256) + ', ' + parseInt(Math.random() * 256) + ')'
      this.$emit('love', dogName)
    }
  }
}
</script>

<style lang="less" scoped>
  .dog {
    display: inline-block;
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    ul {
      display: fixed;
      top: 0;
      right: 0
    }
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
    p {
      text-align: center;
    }
  }
</style>
